/**
*页面引用时，页面需要设置绝对定位脱离文档流;
*model标签放在页面标签外面
*/
<template>
  <div class="container" v-if="li">
       <div class="main">
          <div class="main-son">
                <div>表头内容</div>
                  <div @click="arrow">
                       <img src="https://pic.616pic.com/ys_bnew_img/00/36/17/qzehOYBL1F.jpg" alt="">
                  </div>
                </div>
                
                <!-- 此处盒子为空盒子，用来接收插槽外部数据以渲染 -->
                <div style="margin-bottom: 3.625rem;"></div>
                <div class="main-bottom">
                   <div class="main-bottom-son">
                      <button @click="confirm">确认</button>
                      <button @click="cancel">取消</button>
                   </div>
                </div>
                
       </div>
  </div>
  
</template>

<script lang='ts' setup>
import { reactive,ref} from 'vue'

defineProps(["li"]);


const isShow=ref<boolean>(true)


function confirm(){
      isShow.value=false;
}
function cancel(){
  isShow.value=false;
}
function arrow(){
  isShow.value=false
}
</script>

<style lang='scss' scoped>
.container{
    position: absolute;
    z-index: 1;
    width: 100vw;
    height: 100vh;
    opacity: 0.5;
    background-color:#cfcece;
    display: flex;
    justify-content: center;
    align-items: center;
   
    .main{
        width: 12.325rem;
        height: 5.7375rem;
        background-color: #ffffff;
        border-radius: 0.125rem;
        padding:0.4875rem 0.4125rem 0 0.3625rem;
        box-sizing: border-box;
        font-size: 0.35rem;
        font-weight: bold;
        .main-son{
           width: 100%;
           height: 0.375rem;
           display: flex;
           justify-content: space-between;
           align-items: center;
           img{
              width: 0.4rem;
              height: 0.4rem;
           }
        }
        .main-bottom{
          width: 100%;
          height:0.9125rem;
          display: flex;
          justify-content: center;
          align-items: center;
          .main-bottom-son{
           width: 5.65rem;
           height: 0.9125rem;
           display: flex;
           justify-content: space-between;
           align-items: center;
           button{
              height: 100%;
              width: 2.45rem;
              background-color: white;
              border: 1px solid #cccccc;
              font-size: 0.3375rem;
              color: #cccccc;
           }
        }
        }
    }
}
</style>